<template>
	<div id="app">
		<router-view />
		<!-- toast -->
		<toast :show="toastObj.show"
		       :type="toastObj.type"
		       :text="toastObj.text">
		</toast>
		<!-- loading -->
		<toast :show="loadingObj.show"
		       type="loading"
		       :text="loadingObj.text">
		</toast>
	</div>
</template>
<script>
import utils, { eventNames } from '@/common/utils';
import toast from '@/components/toast.vue';

export default {
  components: {
    toast,
  },
  computed: {
    loadingObj() {
      return this.$store.getters.getLoading;
    },
    toastObj() {
      return this.$store.getters.getToast;
    },
  },
  created() {
    /* toast事件显示监听 */
    utils.eventBus.$on(eventNames.toast.default, text => {
      this.$store.dispatch('showToast', text);
    });
    utils.eventBus.$on(eventNames.toast.tip, text => {
      this.$store.dispatch('showToast', { text, type: 'tip' });
    });
    utils.eventBus.$on(eventNames.toast.success, text => {
      this.$store.dispatch('showToast', { text, type: 'success' });
    });
    utils.eventBus.$on(eventNames.toast.fail, text => {
      this.$store.dispatch('showToast', { text, type: 'fail' });
    });
    /* loading事件显示监听 */
    utils.eventBus.$on(eventNames.loading.show, text => {
      this.$store.commit('showLoading', text || '');
    });
    utils.eventBus.$on(eventNames.loading.hide, () => {
      this.$store.commit('hideLoading');
    });
  },
  methods: {

  },
};
</script>
<style lang="less">
</style>
